React 렌더링: 컴포넌트 렌더링과 생명주기 관리

사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 React는 효율적인 렌더링 프로세스를 통해 컴포넌트를 표시하고 업데이트합니다. React가 컴포넌트를 렌더링하고, 생명주기를 관리하며, 성능을 최적화하는 방법을 이해하는 것은 견고하고 확장 가능한 애플리케이션을 구축하는 데 매우 중요합니다. 이 종합 가이드에서는 이러한 개념들을 상세히 탐구하며, 전 세계 개발자들을 위한 실용적인 예제와 모범 사례를 제공합니다.

React 렌더링 프로세스 이해하기

React 작동의 핵심은 컴포넌트 기반 아키텍처와 가상 DOM(Virtual DOM)에 있습니다. 컴포넌트의 state나 props가 변경될 때, React는 실제 DOM을 직접 조작하지 않습니다. 대신, 가상 DOM이라고 불리는 DOM의 가상 표현을 생성합니다. 그런 다음, React는 이 가상 DOM을 이전 버전과 비교하여 실제 DOM을 업데이트하는 데 필요한 최소한의 변경 사항을 식별합니다. 이 프로세스는 재조정(reconciliation)이라고 알려져 있으며, 성능을 크게 향상시킵니다.

가상 DOM과 재조정(Reconciliation)

가상 DOM은 실제 DOM의 가벼운 인-메모리 표현입니다. 실제 DOM보다 훨씬 빠르고 효율적으로 조작할 수 있습니다. 컴포넌트가 업데이트되면 React는 새로운 가상 DOM 트리를 생성하고 이전 트리와 비교합니다. 이 비교를 통해 React는 실제 DOM에서 어떤 특정 노드를 업데이트해야 하는지 결정할 수 있습니다. 그런 다음 React는 이러한 최소한의 업데이트를 실제 DOM에 적용하여 더 빠르고 성능이 좋은 렌더링 프로세스를 구현합니다.

다음은 간단한 예시입니다:

시나리오: 버튼 클릭으로 화면에 표시된 카운터가 업데이트됩니다.

React 미사용 시: 각 클릭은 전체 DOM 업데이트를 유발하여 전체 페이지 또는 페이지의 넓은 부분을 다시 렌더링하게 되어 성능 저하로 이어질 수 있습니다.

React 사용 시: 가상 DOM 내의 카운터 값만 업데이트됩니다. 재조정 프로세스는 이 변경 사항을 식별하고 실제 DOM의 해당 노드에만 적용합니다. 페이지의 나머지 부분은 변경되지 않으므로 부드럽고 반응성이 뛰어난 사용자 경험을 제공합니다.

React가 변경 사항을 결정하는 방법: 비교 알고리즘(Diffing Algorithm)

React의 비교 알고리즘은 재조정 프로세스의 핵심입니다. 새로운 가상 DOM 트리와 이전 트리를 비교하여 차이점을 식별합니다. 이 알고리즘은 비교를 최적화하기 위해 몇 가지 가정을 합니다:

• 다른 타입의 두 엘리먼트는 다른 트리를 생성합니다. 루트 엘리먼트의 타입이 다른 경우(예: <div>를 <span>으로 변경), React는 이전 트리를 해제(unmount)하고 새로운 트리를 처음부터 다시 구축합니다.
• 같은 타입의 두 엘리먼트를 비교할 때, React는 속성을 보고 변경 사항이 있는지 판단합니다. 속성만 변경된 경우, React는 기존 DOM 노드의 속성만 업데이트합니다.
• React는 리스트 아이템을 고유하게 식별하기 위해 key prop을 사용합니다. key prop을 제공하면 React가 전체 리스트를 다시 렌더링하지 않고도 효율적으로 리스트를 업데이트할 수 있습니다.

이러한 가정을 이해하면 개발자가 더 효율적인 React 컴포넌트를 작성하는 데 도움이 됩니다. 예를 들어, 리스트를 렌더링할 때 key를 사용하는 것은 성능에 매우 중요합니다.

React 컴포넌트 생명주기(Lifecycle)

React 컴포넌트는 잘 정의된 생명주기를 가지고 있으며, 이는 컴포넌트의 존재 기간 중 특정 시점에 호출되는 일련의 메서드로 구성됩니다. 이러한 생명주기 메서드를 이해하면 개발자가 컴포넌트가 렌더링, 업데이트, 마운트 해제되는 방식을 제어할 수 있습니다. 훅(Hooks)이 도입된 후에도 생명주기 메서드는 여전히 유효하며, 그 기본 원리를 이해하는 것은 유익합니다.

클래스 컴포넌트의 생명주기 메서드

클래스 기반 컴포넌트에서는 생명주기 메서드를 사용하여 컴포넌트 생애의 여러 단계에서 코드를 실행합니다. 주요 생명주기 메서드는 다음과 같습니다:

• constructor(props): 컴포넌트가 마운트되기 전에 호출됩니다. state를 초기화하고 이벤트 핸들러를 바인딩하는 데 사용됩니다.
• static getDerivedStateFromProps(props, state): 초기 마운트 및 후속 업데이트 시 렌더링 전에 호출됩니다. state를 업데이트할 객체를 반환하거나, 새로운 props가 state 업데이트를 필요로 하지 않음을 나타내기 위해 null을 반환해야 합니다. 이 메서드는 props 변경에 기반한 예측 가능한 state 업데이트를 촉진합니다.
• render(): 렌더링할 JSX를 반환하는 필수 메서드입니다. props와 state의 순수 함수여야 합니다.
• componentDidMount(): 컴포넌트가 마운트된(트리에 삽입된) 직후에 호출됩니다. 데이터 가져오기나 구독 설정과 같은 부수 효과(side effects)를 수행하기에 좋은 위치입니다.
• shouldComponentUpdate(nextProps, nextState): 새로운 props나 state를 받을 때 렌더링 전에 호출됩니다. 불필요한 리렌더링을 방지하여 성능을 최적화할 수 있습니다. 컴포넌트가 업데이트되어야 하면 true를, 그렇지 않으면 false를 반환해야 합니다.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM이 업데이트되기 직전에 호출됩니다. 변경되기 전의 DOM 정보(예: 스크롤 위치)를 캡처하는 데 유용합니다. 반환 값은 componentDidUpdate()의 파라미터로 전달됩니다.
• componentDidUpdate(prevProps, prevState, snapshot): 업데이트가 발생한 직후에 호출됩니다. 컴포넌트가 업데이트된 후 DOM 작업을 수행하기에 좋은 위치입니다.
• componentWillUnmount(): 컴포넌트가 마운트 해제되고 파괴되기 직전에 호출됩니다. 이벤트 리스너 제거 또는 네트워크 요청 취소와 같은 리소스 정리 작업을 하기에 좋은 위치입니다.
• static getDerivedStateFromError(error): 렌더링 중 오류가 발생한 후에 호출됩니다. 오류를 인수로 받으며 state를 업데이트할 값을 반환해야 합니다. 이를 통해 컴포넌트는 대체 UI(fallback UI)를 표시할 수 있습니다.
• componentDidCatch(error, info): 자손 컴포넌트에서 렌더링 중 오류가 발생한 후에 호출됩니다. 오류와 컴포넌트 스택 정보를 인수로 받습니다. 오류 보고 서비스에 오류를 기록하기에 좋은 위치입니다.

생명주기 메서드 실제 사용 예제

마운트될 때 API에서 데이터를 가져오고 props가 변경될 때 데이터를 업데이트하는 컴포넌트를 생각해 보세요:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('데이터 가져오기 오류:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>로딩 중...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

이 예제에서:

• componentDidMount()는 컴포넌트가 처음 마운트될 때 데이터를 가져옵니다.
• componentDidUpdate()는 url prop이 변경되면 데이터를 다시 가져옵니다.
• render() 메서드는 데이터를 가져오는 동안 로딩 메시지를 표시하고, 데이터가 준비되면 해당 데이터를 렌더링합니다.

생명주기 메서드와 오류 처리

React는 렌더링 중에 발생하는 오류를 처리하기 위한 생명주기 메서드도 제공합니다:

• static getDerivedStateFromError(error): 렌더링 중에 오류가 발생한 후에 호출됩니다. 오류를 인수로 받으며 state를 업데이트할 값을 반환해야 합니다. 이를 통해 컴포넌트는 대체 UI를 표시할 수 있습니다.
• componentDidCatch(error, info): 자손 컴포넌트에서 렌더링 중에 오류가 발생한 후에 호출됩니다. 오류와 컴포넌트 스택 정보를 인수로 받습니다. 오류 보고 서비스에 오류를 기록하기에 좋은 위치입니다.

이러한 메서드를 사용하면 오류를 우아하게 처리하고 애플리케이션이 중단되는 것을 방지할 수 있습니다. 예를 들어, getDerivedStateFromError()를 사용하여 사용자에게 오류 메시지를 표시하고 componentDidCatch()를 사용하여 서버에 오류를 기록할 수 있습니다.

훅(Hooks)과 함수형 컴포넌트

React 16.8에 도입된 React 훅은 함수형 컴포넌트에서 state 및 기타 React 기능을 사용할 수 있는 방법을 제공합니다. 함수형 컴포넌트는 클래스 컴포넌트와 같은 방식의 생명주기 메서드를 가지고 있지 않지만, 훅은 그에 상응하는 기능을 제공합니다.

• useState(): 함수형 컴포넌트에 state를 추가할 수 있게 해줍니다.
• useEffect(): componentDidMount(), componentDidUpdate(), componentWillUnmount()와 유사하게 함수형 컴포넌트에서 부수 효과를 수행할 수 있게 해줍니다.
• useContext(): React 컨텍스트에 접근할 수 있게 해줍니다.
• useReducer(): 리듀서 함수를 사용하여 복잡한 state를 관리할 수 있게 해줍니다.
• useCallback(): 의존성 중 하나가 변경되었을 때만 변경되는 함수의 메모이제이션된 버전을 반환합니다.
• useMemo(): 의존성 중 하나가 변경되었을 때만 다시 계산되는 메모이제이션된 값을 반환합니다.
• useRef(): 렌더링 간에 값을 유지할 수 있게 해줍니다.
• useImperativeHandle(): ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자 정의합니다.
• useLayoutEffect(): 모든 DOM 변경 후에 동기적으로 실행되는 useEffect의 버전입니다.
• useDebugValue(): React DevTools에서 사용자 정의 훅에 대한 값을 표시하는 데 사용됩니다.

useEffect 훅 예제

다음은 useEffect() 훅을 사용하여 함수형 컴포넌트에서 데이터를 가져오는 방법입니다:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('데이터 가져오기 오류:', error);
      }
    }

    fetchData();
  }, [url]); // URL이 변경될 때만 effect를 다시 실행합니다

  if (!data) {
    return <p>로딩 중...</p>;
  }

  return <div>{data.message}</div>;
}

이 예제에서:

• useEffect()는 컴포넌트가 처음 렌더링될 때와 url prop이 변경될 때마다 데이터를 가져옵니다.
• useEffect()의 두 번째 인수는 의존성 배열입니다. 의존성 중 하나라도 변경되면 effect가 다시 실행됩니다.
• useState() 훅은 컴포넌트의 state를 관리하는 데 사용됩니다.

React 렌더링 성능 최적화

효율적인 렌더링은 고성능 React 애플리케이션을 구축하는 데 매우 중요합니다. 다음은 렌더링 성능을 최적화하기 위한 몇 가지 기법입니다:

1. 불필요한 리렌더링 방지하기

렌더링 성능을 최적화하는 가장 효과적인 방법 중 하나는 불필요한 리렌더링을 방지하는 것입니다. 리렌더링을 방지하기 위한 몇 가지 기법은 다음과 같습니다:

• React.memo() 사용: React.memo()는 함수형 컴포넌트를 메모이제이션하는 고차 컴포넌트입니다. props가 변경된 경우에만 컴포넌트를 다시 렌더링합니다.
• shouldComponentUpdate() 구현: 클래스 컴포넌트에서는 shouldComponentUpdate() 생명주기 메서드를 구현하여 props나 state 변경에 따른 리렌더링을 방지할 수 있습니다.
• useMemo()와 useCallback() 사용: 이 훅들은 값과 함수를 메모이제이션하여 불필요한 리렌더링을 방지하는 데 사용될 수 있습니다.
• 불변 데이터 구조 사용: 불변 데이터 구조는 데이터 변경 시 기존 객체를 수정하는 대신 새로운 객체를 생성하도록 보장합니다. 이는 변경 사항을 더 쉽게 감지하고 불필요한 리렌더링을 방지하는 데 도움이 됩니다.

2. 코드 분할(Code-Splitting)

코드 분할은 애플리케이션을 더 작은 청크로 나누어 필요할 때 로드하는 프로세스입니다. 이는 애플리케이션의 초기 로드 시간을 크게 줄일 수 있습니다.

React는 코드 분할을 구현하는 여러 방법을 제공합니다:

• React.lazy()와 Suspense 사용: 이 기능들을 사용하면 컴포넌트를 동적으로 임포트하여 필요할 때만 로드할 수 있습니다.
• 동적 임포트(dynamic imports) 사용: 동적 임포트를 사용하여 모듈을 필요에 따라 로드할 수 있습니다.

3. 리스트 가상화(List Virtualization)

큰 리스트를 렌더링할 때 모든 항목을 한 번에 렌더링하는 것은 느릴 수 있습니다. 리스트 가상화 기법을 사용하면 현재 화면에 보이는 항목만 렌더링할 수 있습니다. 사용자가 스크롤하면 새로운 항목이 렌더링되고 오래된 항목은 마운트 해제됩니다.

리스트 가상화 컴포넌트를 제공하는 여러 라이브러리가 있습니다. 예를 들면 다음과 같습니다:

• react-window
• react-virtualized

4. 이미지 최적화

이미지는 종종 성능 문제의 중요한 원인이 될 수 있습니다. 다음은 이미지 최적화를 위한 몇 가지 팁입니다:

• 최적화된 이미지 형식 사용: 더 나은 압축률과 품질을 위해 WebP와 같은 형식을 사용하세요.
• 이미지 리사이징: 표시 크기에 맞는 적절한 치수로 이미지 크기를 조정하세요.
• 이미지 지연 로딩(Lazy load): 화면에 보일 때만 이미지를 로드하세요.
• CDN 사용: 콘텐츠 전송 네트워크(CDN)를 사용하여 사용자와 지리적으로 더 가까운 서버에서 이미지를 제공하세요.

5. 프로파일링 및 디버깅

React는 렌더링 성능을 프로파일링하고 디버깅하기 위한 도구를 제공합니다. React Profiler를 사용하면 렌더링 성능을 기록하고 분석하여 성능 병목 현상을 일으키는 컴포넌트를 식별할 수 있습니다.

React DevTools 브라우저 확장 프로그램은 React 컴포넌트, state, props를 검사하기 위한 도구를 제공합니다.

실용적인 예제와 모범 사례

예제: 함수형 컴포넌트 메모이제이션하기

사용자 이름을 표시하는 간단한 함수형 컴포넌트를 생각해 보세요:

function UserProfile({ user }) {
  console.log('UserProfile 렌더링 중');
  return <div>{user.name}</div>;
}

이 컴포넌트가 불필요하게 리렌더링되는 것을 방지하려면 React.memo()를 사용할 수 있습니다:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('UserProfile 렌더링 중');
  return <div>{user.name}</div>;
});

이제 UserProfile은 user prop이 변경될 때만 리렌더링됩니다.

예제: useCallback() 사용하기

자식 컴포넌트에 콜백 함수를 전달하는 컴포넌트를 생각해 보세요:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>카운트: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent 렌더링 중');
  return <button onClick={onClick}>클릭하세요</button>;
}

이 예제에서 handleClick 함수는 ParentComponent가 렌더링될 때마다 새로 생성됩니다. 이로 인해 ChildComponent는 props가 변경되지 않았음에도 불구하고 불필요하게 리렌더링됩니다.

이를 방지하기 위해 useCallback()을 사용하여 handleClick 함수를 메모이제이션할 수 있습니다:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 변경될 때만 함수를 재생성합니다

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>카운트: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent 렌더링 중');
  return <button onClick={onClick}>클릭하세요</button>;
}

이제 handleClick 함수는 count state가 변경될 때만 재생성됩니다.

예제: useMemo() 사용하기

props를 기반으로 파생된 값을 계산하는 컴포넌트를 생각해 보세요:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

이 예제에서 filteredItems 배열은 items prop이 변경되지 않았음에도 불구하고 MyComponent가 렌더링될 때마다 다시 계산됩니다. 이는 items 배열이 클 경우 비효율적일 수 있습니다.

이를 방지하기 위해 useMemo()를 사용하여 filteredItems 배열을 메모이제이션할 수 있습니다:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // items 또는 filter가 변경될 때만 다시 계산합니다

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

이제 filteredItems 배열은 items prop이나 filter state가 변경될 때만 다시 계산됩니다.

결론

React의 렌더링 프로세스와 컴포넌트 생명주기를 이해하는 것은 성능이 좋고 유지보수 가능한 애플리케이션을 구축하는 데 필수적입니다. 개발자는 메모이제이션, 코드 분할, 리스트 가상화와 같은 기법을 활용하여 렌더링 성능을 최적화하고 부드럽고 반응성이 뛰어난 사용자 경험을 만들 수 있습니다. 훅의 도입으로 함수형 컴포넌트에서 state와 부수 효과를 관리하는 것이 더 간단해졌으며, 이는 React 개발의 유연성과 강력함을 더욱 향상시켰습니다. 작은 웹 애플리케이션을 구축하든 대규모 엔터프라이즈 시스템을 구축하든, React의 렌더링 개념을 마스터하는 것은 고품질 사용자 인터페이스를 만드는 능력을 크게 향상시킬 것입니다.

추가 자료

• React 공식 문서: 엘리먼트 렌더링
• React 공식 문서: State와 생명주기
• React 공식 문서: 훅(Hooks)
• React 공식 문서: 성능 최적화